<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			input[type="button"]{
				
				margin: 0px 16px;
				
			}
			input[type="text"]{
				
				text-align: center;
				
			}
		</style>
	</head>
	<body>
		
		<table border="1" cellspacing="0">
			<tr>
				<th colspan="2">购物简易计算器</th>
				
			</tr>
			<tr>
				<td>第一个数</td>
				<td><input id="num1" type="text" /></td>
				
			</tr>
			<tr>
				<td>第二个数</td>
				<td><input id="num2" type="text" /></td>
				
			</tr>
			<tr>
				<td colspan="2">
					<input id = "button1" type="button" value="+" onclick="cal('+')"/>
					<input id = "button2" type="button" value="-" onclick="cal('-')";/>
					<input id = "button3" type="button" value="*" onclick="cal('*')"/>
					<input id = "button4" type="button" value="/" onclick="cal('/')"/>
				</td>
			</tr>
			<tr>
				<td>计算结果</td>
				<td><input id="result" type="text"/> </td>
			</tr>
			<tr>
				
				<td colspan="2"><input type="reset" onclick="reset()"/></td>
			</tr>
			
		</table>
	
		
		<!-- <script>
			function ADD(){
				console.log("+");
				var input1 = document.getElementById("num1");
				var input2 = document.getElementById("num2");
				// 通过input标签的属性value拿到填写在input标签里的值
				var num1 = parseFloat(input1.value);
				var num2 = parseFloat(input2.value);
				var num3 = num1 + num2;
				var result = document.getElementById("result");
				result.value=num3;
			}
			
			function Jian(){
				console.log("-");
				var input1 = document.getElementById("num1");
				var input2 = document.getElementById("num2");
				// 通过input标签的属性value拿到填写在input标签里的值
				var num1 = parseFloat(input1.value);
				var num2 = parseFloat(input2.value);
				var num3 = num1 - num2;
				var result = document.getElementById("result");
				result.value=num3;
			}
			
			function Cheng(){
				console.log("*");
				var input1 = document.getElementById("num1");
				var input2 = document.getElementById("num2");
				// 通过input标签的属性value拿到填写在input标签里的值
				var num1 = parseFloat(input1.value);
				var num2 = parseFloat(input2.value);
				var num3 = num1 * num2;
				var result = document.getElementById("result");
				result.value=num3;
			}
			
			function Chu(){
				console.log("/");
				var input1 = document.getElementById("num1");
				var input2 = document.getElementById("num2");
				// 通过input标签的属性value拿到填写在input标签里的值
				var num1 = parseFloat(input1.value);
				var num2 = parseFloat(input2.value);
				var num3 = num1 / num2;
				var result = document.getElementById("result");
				result.value=num3;
			}
			
			function reset(){
				var input = document.getElementsByTagName("text");
				
			}
		</script> -->
		<script>
			// js中方法的参数不需要加var
			function cal(type){
				var num1 = document.getElementById("num1").value;
				var num2 = document.getElementById("num2").value;
				var resultValue;
				// 在js的switch中可以写字符串
				switch(type){
					// 在js里面是不区分单引号和双引号的
					case "+":
						resultValue = parseInt(num1) + parseInt(num2);
					break;	
					case "-":
						resultValue = parseInt(num1) - parseInt(num2);
					break;	
					case "*":
						resultValue = parseInt(num1) * parseInt(num2);
					break;	
					case "/":
						resultValue = parseInt(num1) / parseInt(num2);
					break;	
				}
				
				 var resultInput = document.getElementById("result");
				resultInput.value = resultValue; 
			}
		</script>
		
	</body>
</html>
